import 'package:flutter/material.dart';

class FlowTestPage extends StatefulWidget {
  @override
  _FlowTestPageState createState() {
    return _FlowTestPageState();
  }
}

class _FlowTestPageState extends State<FlowTestPage> {
  List<Widget> _wrapItems() => List.generate(2, (index) {
        return Container(
          color: Colors.red,
          width: 50,
          height: 50,
          alignment: Alignment.center,
          child: Text(
            '$index',
            style: TextStyle(color: Colors.white),
          ),
        );
      });

  @override
  Widget build(BuildContext context) {
    print('screen width:${MediaQuery.of(context).size.width}');
    return Scaffold(
        appBar: AppBar(
          title: Text('Flow'),
        ),
        body: Container(
          color: Colors.yellow,
          child: Flow(
              delegate: TestFlowDelegate(
                  margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0)),
              children: <Widget>[
                new Container(
                  width: 200.0,
                  height: 50.0,
                  color: Colors.red,
                ),
                new Container(
                  width: 30.0,
                  height: 50.0,
                  color: Colors.green,
                ),
                new Container(
                  width: 110.0,
                  height: 50.0,
                  color: Colors.blue,
                ),
                // new Container(
                //   width: 80.0,
                //   height: 50.0,
                //   color: Colors.yellow,
                // ),
                // new Container(
                //   width: 130.0,
                //   height: 50.0,
                //   color: Colors.brown,
                // ),
                // new Container(
                //   width: 80.0,
                //   height: 50.0,
                //   color: Colors.purple,
                // ),
              ]),
        ));
  }
}

class TestFlowDelegate extends FlowDelegate {
  EdgeInsets margin = EdgeInsets.zero;
  TestFlowDelegate({required this.margin});

  @override
  void paintChildren(FlowPaintingContext context) {
    /// 左边距
    var x = margin.left;
    var y = margin.top;
    var marginRight = margin.right;
    var marginLeft = margin.left;
    double curWidth = 0;
    double nextWidth = 0;
    double sw = context.size.width;
    double subW = 0;

    for (int i = 0; i < context.childCount; i++) {
      /// child 的宽度（没有加上margin left）
      curWidth = context.getChildSize(i)!.width;
      if (i != context.childCount - 1) {
        nextWidth = context.getChildSize(i + 1)!.width;
      }
      subW += x + curWidth;
      print('>>>x:$x curWidth:$curWidth nextWidth:$nextWidth subW:$subW');

      /// child 的宽度 < 屏幕的宽度, 单行绘制
      if (subW <= sw) {
        if (i % 2 != 0) {
          x += sw - curWidth - 2 * marginRight;
        }
        context.paintChild(i,
            transform: new Matrix4.translationValues(x, y, 0.0));

        /// 当前绘制的 child 距离左边距大小（加上margin left）
        // x = w + margin.left;
        // x = sw - nextWidth - margin.right;
        // x = subW;

        print('--------> line-$i x:$x');
      } else {
        /// 恢复绘制的 child 左边距
        x = margin.left;

        /// 行数 + 1
        y += context.getChildSize(i)!.height + margin.top + margin.bottom;
        context.paintChild(i,
            transform: new Matrix4.translationValues(x, y, 0.0));
        print('===== 22 x坐标:$x y坐标:$y');

        /// 下一行开始绘制 child 的左边距
        // x += context.getChildSize(i)!.width + x + margin.right;
        // x = sw - curWidth - margin.left;
        x = sw - nextWidth - margin.right;
        print('--------> line-$i x:$x');
      }
    }
  }

  /// 是否重绘 FlowDelegate
  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return oldDelegate != this;
  }
}
